<template>
  <div class="banner-wrapper">
    <swiper>
      <swiper-item>
         <div class="item banner1">
          <div class="banner-info">
            <div style="font-size: 15px">本周热门</div>
            <div style="font-size: 25px">算法 | 识别</div>
            <div style="font-size: 25px">汽车信息快速获取</div>
            <div style="margin-top: 15%">
              <span>立即探索</span>
              <a href="javascript:;" style="margin-left: 10px">
                <img
                  src="..\assets\images\探索icon@1x.png"
                  alt="探索"
                  style="vertical-align: middle"
                />
              </a>
            </div>
          </div>
          <img src="../assets/images/banner@1x.png" alt="banner1" />
        </div>
      </swiper-item>
      <swiper-item>
        <img src="../assets/images/1.png" alt="1" />
      </swiper-item>
      <swiper-item>
        <img src="../assets/images/2.png" alt="2" />
      </swiper-item>
    </swiper>
    <div class="banner banner2">
      <div class="content">
        <relatedInfo
          goWhere="进入广场"
          about-title="关于AI FORCE"
          about-info="AI
        FORCE是一站式AI算法交易及产品化平台，致力于为互联网、智能家居、智慧零售、泛娱乐和安防等行业提供全栈赋能。"
        >
        </relatedInfo>
        <div class="image-wrapper">
          <div class="image-item">
            <img src="../assets/images/Rectangle_594@1x.png" alt="item1" />
            <div class="item-info">
              <div class="item-title">一站式生态服务</div>
              <div class="item-content-list">
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">智能家居</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">智慧零售</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">泛娱乐</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">安全保护</span>
                </div>
              </div>
            </div>
          </div>
          <div class="image-item">
            <img src="../assets/images/Rectangle_595@1x.png" alt="item1" />
            <div class="item-info">
              <div class="item-title">拥有的核心优势</div>
              <div class="item-content-list">
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">资源丰富</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">价格低廉</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">技术支持</span>
                </div>
                <div class="item-content-li">
                  <div class="small-point"></div>
                  <span class="item-content-title">安全可靠</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner banner3">
      <div class="content">
        <relatedInfo
          goWhere="进入社区"
          about-title="AI学习生态，学、练、用一体化"
          about-info=" AI FORCE为用户建立集成编程环境、免费算力、开源算法、开放数据的学习与实训社区，为校园开发者提供比赛、交流、分享的平台，旨在打造一个学、练、用一体化的AI学习生态。 "
        ></relatedInfo>
        <div class="image-wrapper">
          <div class="image-item">
            <img src="../assets/images/Rectangle_608@1x-1.png" alt="" />
            <div class="image-introduce">
              <div class="introduce-wrapper">
                <div class="introduce-title">Faceunity人脸美颜特效SDK</div>
                <div class="introduce-info">
                  Faceunity基于人脸视频增强现实提供相关SDK
                </div>
              </div>
              <div class="tip-info">精品</div>
            </div>
          </div>
          <div class="image-item">
            <img src="../assets/images/Rectangle_597@1x.png" alt="" />
            <div class="image-introduce">
              <div class="introduce-wrapper">
                <div class="introduce-title">高尔夫球场遥感监测</div>
                <div class="introduce-info">
                  Faster R-CNN应用于高尔夫球场遥感检测
                </div>
              </div>
              <div class="tip-info">精品</div>
            </div>
          </div>
          <div class="image-item">
            <img src="../assets/images/Rectangle_608@1x-2.png" alt="" />
            <div class="image-introduce">
              <div class="introduce-wrapper">
                <div class="introduce-title">智能文本分析系统</div>
                <div class="introduce-info">
                  基于“软件+方法+模型”知识图谱服务体系打造
                </div>
              </div>
              <div class="tip-info">精品</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import relatedInfo from "../components/relatedInfo.vue";
import {Swiper,SwiperItem} from '../components/swiper'

export default {
  name: "homePage",
  components: {
    relatedInfo,
    Swiper,
    SwiperItem
  },
};
</script>
<style>
.banner-wrapper {
  max-width: 1600px;
  min-width: 1300px;
  color: white;
  font-size: 0px;
}
.auto-item {
  width: 100%;
  overflow: hidden;
}
.img-list {
  width: 6400px;
}
.item {
  float: left;
  width: 1600px;
  position: relative;
}
.item > img {
  width: 1600px;
}
.banner-info {
  font-size: 14px;
  position: absolute;
  left: 16%;
  top: 36%;
  text-align: left;
}
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 850px;
  background: #18191f;
  color: white;
  font-size: 20px;
  width: 100%;
}
.image-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-top: 10%;
}
.banner2 .image-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-info {
  margin-left: 15px;
}
.item-title {
  margin-bottom: 25px;
  width: 130px;
  font-size: 18px;
}
.item-content-list {
  font-size: 14px;
  line-height: 30px;
}
.small-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c30f5;
  display: inline-block;
  margin-right: 12px;
}
.banner3 .about-info-wrapper{
    margin-left: 205px;
}
.banner3 .image-wrapper img{
    width: 315px;
}
.banner3 .image-wrapper{
    width: 1100px;
    display: flex;
    justify-content: space-around;
    margin-top: 10%;
}
.image-introduce{
    display: flex;
    justify-content: space-between;
    position: relative;
    color: #000;
    background: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    bottom: 10px;
    font-size: 12px;
}
.introduce-wrapper{
    height: 50px;
    text-align: left;
    margin-left: 10px;
}
.introduce-title{
    font-size: 14px;
    line-height: 25px;
}
.tip-info{
    margin-top: 5px;
    margin-right: 10px;
    color: #fff;
    font-size: 13px;
    background: #f22bb2;
    height: 22px;
    width: 35px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}
</style>
